<template>
  <div>
    <div ref="chart" style="width: 98%;min-width:360px ;height: 400px;"></div>
  </div>
</template>
<script>
  import {
    MultipleValueChart
  } from '@/views/components/chart'
  import {
    today
  } from '@/views/components/utils'
  import deviceEnvironmentAPI from '@/api/device/environment'
  import departmentAPI from '@/api/system/dept'

  export default {
    name: 'EnvironmentLineChart',
    mixins: [MultipleValueChart],
    data() {
      return {
        chartOption: {
          title: {
            text: '环境信息图谱',
            left: 'center'
          },
          tooltip: {
            show: true
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        seriesTooltipFormatter: function (params, ticket, callback) { //TODO 需要修改
          const {
            name,
            seriesName,
            data
          } = params
          const {
            max,
            min,
            maxEnv,
            minEnv,
            unit
          } = data
          var environment = null,
            value = null
          if (seriesName === '最高') {
            environment = maxEnv
            value = max
          } else if (seriesName === '最低') {
            environment = minEnv
            value = min
          }
          var defaultHmtl = `${seriesName}<br/>${name} : ${value} ${unit}`
          if (environment == undefined || environment == null) {
            return defaultHmtl
          }
          const {
            deptId,
            createTime
          } = environment
          defaultHmtl = `${seriesName}<br/>${name}:${value}${unit}<br/>${createTime}`
          if (data.department !== undefined) {
            return defaultHmtl + `<br/>${data.department.name}`
          }
          departmentAPI.oneById(deptId).then(res => {
            data.department = res.data
            const html = defaultHmtl + `<br/>${data.department.name}`
            callback(ticket, html)
          })
          return defaultHmtl
        },
        valueFormat: {
          max: {
            name: "最高",
            unit: "",
          },
          min: {
            name: "最低",
            unit: "",
          },
          value: {
            name: '数值',
            unit: ''
          }
        },
        valueKeys: ['max', 'min'],
        groupKeys: ['name'],
        chartType: "bar",
        queryParams: {
          date: today(),
          deptId: null
        },
        list: []
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      queryData() {
        const vm = this
        deviceEnvironmentAPI.maxAndMin(this.queryParams).then(res => {
          if (res.data === undefined) {
            return
          }
          vm.setList(res.data)
          vm.updateChart()
        })
      },
      setList(data) {
        const {
          minTemp,
          maxTemp,
          minHumi,
          maxHumi,
          minCh2o,
          maxCh2o,
          minPm2d5,
          maxPm2d5,
          minTvoc,
          maxTvoc,
          map
        } = data
        const vm = this
        const list = []
        list.push({
          name: vm.$t('Temperature'),
          unit: '℃',
          max: maxTemp,
          min: minTemp,
          maxEnv: map.maxTemp,
          minEnv: map.minTemp
        })
        list.push({
          name: vm.$t('Humidity'),
          unit: '%',
          max: maxHumi,
          min: minHumi,
          maxEnv: map.maxHumi,
          minEnv: map.minHumi
        })
        list.push({
          name: 'CH2O',
          unit: 'μg/m³',
          max: maxCh2o,
          min: minCh2o,
          maxEnv: map.maxCh2o,
          minEnv: map.minCh2o
        })
        list.push({
          name: 'PM2.5',
          unit: 'μg/m³',
          max: maxPm2d5,
          min: minPm2d5,
          maxEnv: map.maxPm2d5,
          minEnv: map.minPm2d5
        })
        list.push({
          name: 'TVOC',
          unit: 'μg/m³',
          max: maxTvoc,
          min: minTvoc,
          maxEnv: map.maxTvoc,
          minEnv: map.minTvoc
        })
        this.list = [].concat(list)
      }
    }
  }

</script>
